<template>
    <div class="login">
    <img :src="imgSrc" width="100%" height="100%" alt="" />
  <div class="loginPart">
    <h2>人事管理系统</h2>
  <el-form
                  :rules="rules"
                  ref="loginForm"
                  v-loading="loading"
                  element-loading-text="正在登录..."
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  :model="loginForm"
                  class="loginContainer">
    <div class="inputElement" prop="id">
      <el-input v-model="loginForm.id" type="text" placeholder="请输入用户名/手机号 "></el-input>
    </div>
    <div class="inputElement" prop="password">
      <el-input v-model="loginForm.password" type="text" placeholder="请输入密码 "></el-input>
    </div>
    <tr>
                  <td class="login-title" style="justify-content: center">
                    身份
                  </td>
                  <td>
                    <el-radio v-model="type" :label="1" border>总裁</el-radio>
                    <el-radio v-model="type" :label="2" border>主管</el-radio>
                    <el-radio v-model="type" :label="3" border>员工</el-radio>
                  </td>
                </tr>
                <Vcode :show="isShow" @success="success" @close="close"></Vcode> 
      <el-button-group style="width: 100%">
                  <el-button size="normal" type="danger" style="width: 50%;" @click="submit" :round="true" :disabled="right">人机验证</el-button>
                  <el-button size="normal" type="primary" style="width: 50%;" @click="submitLogin" :round="true" :disabled="!right">登录</el-button>
                </el-button-group>
  </el-form>
  </div>
  </div>
</template>

<script>

import {Message} from "element-ui";
import Vcode from 'vue-puzzle-vcode'
    export default {
      name:"Login_index",
      data() {
      return {
        //imgSrc: url("../assets/images/demo6.jpeg"),
        imgSrc: require("../assets/images/demo6.jpeg"),
        isShow : false,
        right : false,
        dialogAddVisible : false,
        post_type_options : [],
        bannerHeight : "",
        loading: false,
        type: 1,
        vcUrl: '/verifyCode?time='+new Date(),
        loginForm: {
          id: '',
          password: '',
          employee_type: localStorage.getItem("role"),
        },
      checked: true,
      rules: {
        id: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
      }
    }
 },
 components : {
  Vcode
 },
 created(){
  this.loginForm.employee_type = this.type
 },
 mounted(){
  window.addEventListener('resize',() => {
      this.bannerHeight=this.$refs.bannerHeight[0].hight;
      this.imgLoad();
    },false)
    this.initDepartment();
    this.initPost();
 },
 methods: {
  updateVerifyCode() {
      this.vcUrl = '/verifyCode?time='+new Date();
    },
  submit() {
    this.isShow = true;
  },
  // submitLogin() {
  //   //this.$router.replace({ path: '/home'})
  //   this.$refs.loginForm.validate((valid)=> {
  //     if(valid) {
  //       this.loading = true;
  //       let str = '';
  //       if (this.type == 1) {
  //         str = '总裁';
  //       }else if (this.type == 2) {
  //         str = '主管'
  //       }else {
  //         str = '员工';
  //       }
  //       localStorage.setItem("type", str); //设置登录人员的身份
  //       localStorage.setItem("id", this.loginForm.id);
  //       if (str === '总裁' || str === '主管' || str === ' 员工') {
  //         localStorage.setItem("role", str)//设置登陆角色
  //         this.loginForm.employee_type = str;
  //         console.log("loginForm.type = ", this.loginForm.employee_type);
  //         console.log("即将提交的信息：", this.loginForm);

  //         this.$axios.post('/AdminLogin', this.loginForm).then((response)=> {
  //           this.loading = false;
  //           const _this = this;
  //           console.log("resp = ", response.data)
  //           if(response) {
  //             if (response.data.msg == "登录成功") {
  //               console.log("200")
  //               this.$store.commit("INIT_CURRENTHR", response.data.data);
  //               console.log("333")
  //               window.sessionStorage.setItem("user", JSON.stringify(response.data.data));
  //               console.log("存储的数据："+JSON.stringify(response.data.data));
  //               let path = this.$route.query.redirect;
  //               //this.$router.push({path : '/home', query : _this.loginForm})
  //               this.$router.replace((path == '/' || path == undefined) ? '/home' : path);
  //                 _this.$router.push({path : '/home', query : _this.loginForm})
  //             } else {
  //               Message.error({message: response.data.msg})
  //             }
  //           } else {
  //             this.vcUrl = '/verifyCode?time='+new Date();
  //           }
  //         })
  //       }
  //     } else {
  //       return false;
  //     }
  //   });
  // },

  submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          // type:1是老板 2是主管 3是员工
          let str = '';
          if (this.type == 1) {
            str = '总裁';
          } else if (this.type == 2) {
            str = '主管';
          } else {
            str = '员工';
          }
          localStorage.setItem("type", str);//设置登录人员的身份
          localStorage.setItem("id", this.loginForm.id);
          if (str === '总裁' || str === '主管' || str === '员工') {
            localStorage.setItem("role", str);//设置登陆角色
            this.loginForm.employee_type = str;
            console.log("loginForm.type = ", this.loginForm.employee_type);
            console.log("即将提交的信息：", this.loginForm);

            this.$axios.post('/AdminLogin', this.loginForm).then((resp) => {
              this.loading = false;
              const _this = this;
              console.log("resp = ", resp.data)
              if (resp) {
                if (resp.data.msg == "登录成功") {
                  console.log("222")
                  this.$store.commit("INIT_CURRENTHR", resp.data.data);
                  console.log("333")
                  window.sessionStorage.setItem("user", JSON.stringify(resp.data.data));
                  console.log("存储的数据："+JSON.stringify(resp.data.data));
                  let path = this.$route.query.redirect;
                  this.$router.replace((path == '/' || path == undefined) ? '/home' : path);
                  _this.$router.push({path : '/home', query : _this.loginForm})
                } else {
                  Message.error({message: resp.data.msg})
                }
              } else {
                this.vcUrl = '/verifyCode?time='+new Date();
              }
            })
          }

        } else {
          return false;
        }
      });
    },

  success() {
    this.isShow = false;
    this.right = true;
  },
  close() {
    this.isShow = false;
    this.right = false
  }
 }
}
</script>
<style>
    .loginPart{
    position:absolute;
    /*定位方式绝对定位absolute*/
    top:50%;
    left:50%;
    /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
    transform:translate(-50%,-50%);
    /*实现块元素百分比下居中*/
    width:450px;
    padding:50px;
    background: rgba(0,0,0,.5);
    /*背景颜色为黑色，透明度为0.8*/
    box-sizing:border-box;
    /*box-sizing设置盒子模型的解析模式为怪异盒模型，
    将border和padding划归到width范围内*/
    box-shadow: 0px 15px 25px rgba(0,0,0,.5);
    /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
    border-radius:15px;
    /*边框圆角，四个角均为15px*/
  }
  .loginPart h2{
    margin:0 0 30px;
    padding:0;
    color: #fff;
    text-align:center;
    /*文字居中*/
  }
  .loginPart .inputbox{
    position:relative;
  }
  .loginPart .inputElement input{
    width: 100%;
    padding:10px 0;
    font-size:16px;
    color:#fff;
    letter-spacing: 1px;
    /*字符间的间距1px*/
    margin-bottom: 30px;
    border:none;
    border-bottom: 1px solid #fff;
    outline:none;
    /*outline用于绘制元素周围的线
    outline：none在这里用途是将输入框的边框的线条使其消失*/
    background: transparent;
    /*背景颜色为透明*/
  }

  .login{
    width:100%;
    height:100%;
  }
</style>